<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>userList</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}"></link>
    <script type="text/javascript" th:src="@{/js/My97DatePicker/WdatePicker.js}"></script>
    <script type="text/javascript" src="/js/My97DatePicker/lang/zh-cn.js"></script>
    <script type="text/javascript" th:src="@{/js/jquery/jquery-1.10.2.min.js}"></script>
</head>
<body class="container">
<br/>
<h1>账单列表</h1>
<br/><br/>
<div class="with:80%">
<!--    <form class="form-inline" id="qf"   th:action="@{/bill/list-page}"  method="post">-->
<!--    <form class="form-inline" id="qf"   th:action="@{/}"  method="post">-->
    <form class="form-inline" id="qf" method="post">
		<!-- TODO 分页相关参数-->
<!--        <input id="pageNum" name="pageNum" th:value="${pageInfo.pageNum}" style="display: none">-->
<!--        <input id="pageSize" name="pageSize" th:value="${pageInfo.pageSize}" style="display: none">-->

        <div class="form-group">
<!--            <label for="typeId" class="control-label">类型</label>-->
        <!-- TODO type select-->
<!--            <select name="typeId" id="typeId" class="form-control">-->
<!--                <option value="">全部</option>-->
<!--                <option th:each="t:${billTypes}" th:value="${t.typeId}"-->
<!--                        th:text="${t.typeName}"-->
<!--                        th:selected="(${bill.typeId} == ${t.typeId})"></option>-->
<!--            </select>-->
        </div>
        <div class="form-group">
            <label for="start" class="control-label" >开始时间</label>
            <input type="text" class="form-control" name="start" id="start" placeholder="开始时间"
                   onclick="WdatePicker()"
                   th:
            />
        </div>
        <div class="form-group">
            <label for="end" class="control-label">结束时间</label>
            <input type="text" class="form-control" name="end"  id="end" placeholder="结束时间" onclick="WdatePicker()"/>
        </div>
        <div class="form-group">
            <input type="submit" value="查询" class="btn btn-info" />
            &nbsp; &nbsp;
            <input type="reset" value="重置" class="btn btn-info" />
            &nbsp; &nbsp;
<!--            <a href="/bill/toAdd" th:href="@{/bill/toAdd}" class="btn btn-info">添加</a>-->
        </div>
    </form>
</div>
<br/>

<div class="with:80%">
    <table class="table table-striped table-bordered">
        <thead>
        <tr>
            <th>#</th>
            <th>标题</th>
            <th>时间</th>
            <th>金额</th>
            <th>类别</th>
            <th>说明</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
		<!-- TODO 页面循环-->
        <tr th:each="b, billstatus:${pageInfo.list}" th:style="${billstatus.odd} ? 'backgroud-color:#A3C6C8'">
            <th scope="row" th:text="${b.billId}">id</th>
            <td th:text="${b.title}">title</td>
            <td th:text="${b.createTime} ? ${#dates.format(b.createTime, 'yyyy-MM-dd')}">time</td>
            <td th:text="${b.typeName}">typeName</td>
            <td th:text="${b.explanation}">explanation</td>
            <td>
                <a th:href="|/bill/update/${b.billId}|">修改</a>
                <a th:href="|/bill/delete/${b.billId}|">删除</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<!-- TODO 分页工具类-->

<!-- TODO 分页的js代码-->

</body>
</html>